<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #div2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1">
        1
    </div>
    <!-- <div id="div2"></div> -->

    <input type="text" id="input1">
    <script>

        // 事件
        // 事件是可以让js 检查到的一系列用户行为
        // 点击事件  用户点击了
        // 事件的三要素
        // 谁  事件源
        // 什么事件（事件类型）  点击事件
        // 做什么   （事件函数） 事件出发后调用的函数

        // 谁  页面中某一个元素
        // 什么事件
        // 鼠标事件
        // onclick  点击
        // onmouseover   鼠标经过
        // onmouserout   鼠标离开
        // onmouse up    鼠标弹起
        // onmouse down  鼠标按下
        // onmousemove   鼠标移动
        // 表单
        // onfocus       获得焦点
        // onblur        失去焦点
        var div1=document.querySelector('#div1');
        var div2=document.querySelector('#div2');
        div1.onmouseover=function(){
            div1.style.backgroundColor='green';
            console.log(111);
        }

        // div1.onmouseout=function(){
        //     div1.style.backgroundColor='red';
        // }

        div1.onmouseup=function(){
            div1.style.backgroundColor='green'
        }

        div1.onmousedown=function(){
            div1.style.backgroundColor='pink'
        }

        // 鼠标移动  只要一移动就触发
        div1.onmousemove=function(){
            div1.style.backgroundColor='green'
            console.log(111);
        }

        var input1=document.querySelector('#input1');
        // 选择某个输入框 想输入内容  就叫获取焦点
        input1.onfocus=function(){
            input1.style.backgroundColor='green'
        }

        input1.onblur=function(){
            input1.style.backgroundColor='red'
        }


    </script>
</body>
</html>